import React, { useState, useEffect } from "react";
import style from "./youth.module.css";
import { getYouth } from "../../../components/api";
import EbookTil from "../../common/ebookTil";
import { NavLink } from "react-router-dom";

const { all } = style;
interface IBook {
  title?: string;
  book_list?: IList;
}

interface IList {
  id: number;
  name: string;
  [propName: string]: any;
}

export default function Youth() {
  let [youthList, setYouthList] = useState<IBook>({});

  const getYouthList = async () => {
    let res = await getYouth();
    // console.log(res, "youth")
    setYouthList(res.data.list1);
    // console.log(youthList)
  };

  let til = youthList.title;
  let book_list: any = youthList.book_list;

  useEffect(() => {
    getYouthList();
  }, []);

  return (
    <div className={all}>
      <EbookTil title={til} />
      <ul>
        {book_list?.map((item: any) => (
          <li key={item.id}>
            <NavLink to={"/bookdetail/" + item.id}>
              <img src={item.img} alt="" />
              <dl>
                <dt>{item.name}</dt>
                <dd>{item.author}</dd>
              </dl>
            </NavLink>
          </li>
        ))}
      </ul>
    </div>
  );
}
